<template>
  <el-dialog v-dialog-drag append-to-body :close-on-click-modal="false" width="1500px" :visible.sync="visible"
    :before-close="beforeClose" title="模板选择">
    <div class="wrapper">
      <div class="ub">
        <div class="catalogList">
          <div class="title">目录模板</div>
          <div class="li" @click="selectOne(item, index)" :class="{ active: selectIndex == index }"
            v-for="(item, index) in catalogList" :key="index" :title="item.catalogName">{{ item.catalogName
            }}</div>
        </div>
        <div class="detailList ub-f1">
          <div class="title">目录详情</div>
          <div class="buttons">
            <el-button type="primary" class="button" @click="toogleExpoose">展开/折叠</el-button>
          </div>
          <el-table class="detailTable" :key="tableKey" :default-expand-all="expandAll" :height="tableHeight"
            v-loading="loading" :data="detailList" :tree-props="{ children: 'children' }" row-key="id">
            <el-table-column label="名称" align="center" prop="name" />
            <el-table-column label="创建机构" align="center" prop="deptName" />
            <el-table-column label="创建时间" align="center" prop="createTime" />
            <el-table-column label="文件模板" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="preview(scope.row)"
                  v-if="scope.row.createJunior != '0'">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="submit">确定</el-button>
      <el-button size="mini" @click="beforeClose">关闭</el-button>
    </div>
    <el-dialog title="文件预览" :visible.sync="previewDialogVisible" width="700px" append-to-body>
      <FileUpload @addNum="getNum" :value="fileList"></FileUpload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import { listCatalog } from "@/api/biz/catalog/catalog";
import { listDetail, getDetail } from "@/api/biz/catalogDetail/catalogDetail";
export default {
  name: "TemplateDialog",
  props: {
    visible: Boolean,
    sData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      catalogList: [],
      selectIndex: -1,
      selectRow: null,
      detailList: [],
      loading: false,
      expandAll: false,
      tableKey: Date.now(),
      previewDialogVisible: false,
      fileIds: [],
      fileList: [],
    }
  },
  computed: {
    tableHeight() {
      // let height = document.body.offsetHeight - 280;
      // if (height < 500) {
      //   height = 500;
      // }
      // return height + "px";
      return "600px"
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getCatalogList();
    },
    submit() {
      if(!this.selectRow || !this.selectRow.id){
        return this.$message.warning("请先选择目录模板")
      }
      this.$emit("chooseDone", this.selectRow)
      this.beforeClose()
    },
    beforeClose() {
      this.$emit('update:visible', false);
    },
    async getCatalogList() {
      const res = await listCatalog({
        pageNum: 1,
        pageSize: 10000,
      })
      this.catalogList = res.rows;
      this.noData = false;
    },
    async getDetailList() {
      this.loading = true;
      const res = await listDetail({ catalogId: this.selectRow.id })
      this.detailList = this.handleTree(res.data, "id", "parentId");
      this.loading = false;
    },
    selectOne(row, index) {
      this.expandAll = false;
      this.selectIndex = index;
      this.selectRow = row
      this.getDetailList();
    },
    toogleExpoose() {
      this.expandAll = !this.expandAll;
      this.tableKey = Date.now();
    },
    getNum(childNum) {
      this.fileIds = childNum.map((item) => item.id);
    },
    preview(row) {
      const id = row.id || this.ids;
      getDetail(id).then((response) => {
        this.form = response.data;
        this.previewDialogVisible = true;
        this.fileList = response.data.bizSafeDocAttachList.map((item) => {
          return Object.assign(item, {
            name: item.displayName + "." + item.extName,
            url: process.env.VUE_APP_MINIO_BASE_API + "/" + item.bucket + "/" + item.realName
          })
        });
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.ub {
  display: flex;

  .ub-f1 {
    flex: 1;
    width: 0px;
  }
}

.wrapper {
  max-height: 800px;
  overflow-y: auto;
  overflow-x: hidden;

  .title {
    height: 40px;
    line-height: 40px;
    background: #e0e0e0;
    padding-left: 20px;
    color: black;
  }

  .catalogList {
    border: 1px solid #cccccc;
    width: 250px;
    margin-right: 10px;
    overflow: auto;
    height: 700px;

    .li {
      height: 40px;
      line-height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-bottom: 1px solid #eeeeee;
      padding: 0px 5px;
      cursor: pointer;

      &.active {
        background-color: #1890ff;
        color: #fff;
      }

      &.last {
        border-bottom: 0px;
      }
    }
  }

  .detailList {
    border: 1px solid #cccccc;
    margin-right: 10px;
    overflow: auto;
    height: 700px;

    .buttons {
      margin: 5px;
    }
  }
}
</style>